/* global BMapGL BMAP_SATELLITE_MAP BMAP_NORMAL_MAP mapvgl */
import React, { useEffect, useState } from 'react'
import styles from '../index.module.less';

export default function Map(props) {
    const [map, setMap] = useState();
    const [overlay, setOverlay] = useState();
    useEffect(() => {
        initMap();
    }, []);

    function initLayer(map) {
        var view = new mapvgl.View({
            map: map
        });
        var shapeLayer = new mapvgl.ShapeLayer({
            color: 'rgba(194, 147, 75, 0.8)', // 柱状图颜色
            enablePicked: true, // 是否可以拾取
            selectedIndex: -1, // 选中项
            selectedColor: '#ee1111', // 选中项颜色
            autoSelect: true, // 根据鼠标位置来自动设置选中项
            data: [{geometry: {
                type: 'Polygon',
                coordinates: [props.coordinates]
            }}]
        });
        view.addLayer(shapeLayer);
    }

    function initMap() {
        // 百度地图API功能
        const map = new BMapGL.Map('bmap');  // 创建Map实例
        map.centerAndZoom('北京',8);
        map.enableScrollWheelZoom();
        map.addControl(new BMapGL.ZoomControl());
        setMap(map);
        initLayer(map);
    }

    return (
        <div id="bmap" className={styles.bmap}></div>
    )
}
